<!DOCTYPE html>
<html>
<head lang="ch-zn">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../lib/angular.js"></script>
    <script src="../../lib/angular-route.js"></script>
    <script type="text/javascript">
        angular.module('myApp', ['ngRoute'])
                .run(function ($rootScope) {
                    $rootScope.rootProperty = 'root scope';
                })
                .controller('ParentCtrl', function ($scope) {
                    $scope.parentProperty = 'parent scope';
                })
                .controller('ChildCtrl', function ($scope) {
                    $scope.childProperty = 'child scope';
                    $scope.fullScenceFromChild = 'Same scope we can access: ' +
                            $scope.rootProperty +
                            $scope.parentProperty +
                            $scope.childProperty;

                })
                .directive('myDirective', function () {
                    return {
                        restrict: 'A',
                        replace: true,
                        template: '<a href="{{myUrl}}" target="_blank">{{myLinkText}}</a>',
                        scope:{myUrl:'@',
                            myLinkText:'@'
                        }
                    }
                });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="ParentCtrl">
    <p>We can access {{rootProperty}} and {{parentProperty}}</p>
    <div ng-controller="ChildCtrl">
        <p>
            We can access {{rootProperty}} and {{parentProperty}} and {{childProperty}}
        </p>
    </div>
</div>
<div>
    <div my-directive my-url="http://www.banggo.com" my-link-text="Click me to go to Banggo!"></div>
</div>
</body>
</html>